<template>
  <div ref="refChart" :style="{ height: kHOne + 'px'}"></div>
</template>

<script>
import theme from '../assets/theme/theme'
import {getComplexJson} from '../api'

export default {
  name: 'ChartThree',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartThree;
    }
  },
  data() {
    return {
      chartInstance: null,
      successData: [],
      failureData: [],
      kHOne: null,
      // 自适应浏览器获取宽高大小定时器
      screenTimer: null,
      // 局部刷新数据定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHOne = Math.round(this.screenHeight * 0.47)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.kHOne = Math.round(this.screenHeight * 0.47);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme);
      const initOption = {
        title: {
          text: "重大项目融资情况汇总统计",
          left: 'center'
        },
        calculable: true,
        legend: {
          //   指示框名字  注意！要和下方series中的name一起改
          data: ["授信总金额", "投放总金额"],
          // 指示框位置  距离上下左右多少
          right: "2%",
          top: "8%",
          textStyle: {
            //color: '#4F4F4F'   //字体颜色
          },
        },
        grid: {
          top: "15%",
          left: "0.5%",
          right: "0.5%",
          bottom: "6%",
          // grid 区域是否包含坐标轴的刻度标签
          containLabel: true,
        },
        // 是否显示提示框组件
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          textStyle: {
            align: 'left'
          }
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              //x轴线的颜色以及宽度
              show: true, //是否显示X轴
              lineStyle: {
                color: "#4F4F4F",
              },
            },
            axisLabel: {
              interval: 0,  //间隔几条显示
              // rotate: 20,  // 切斜度数
              fontSize: 10,   //字体大小
            },
            axisTick: {
              //是否显示刻度线
              show: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              //y轴刻度线
              show: true,
            },
            axisLine: {
              show: true, // Y轴
              lineStyle: {
                color: "#4F4F4F",
              },
            },
            splitLine: {
              // 表格里面Y轴线条
              show: true,
              lineStyle: {
                type: "dashed", //虚线
                color: "#04072F", //虚线颜色
              }
            }
          }
        ],
        series: [
          {
            name: "授信总金额",
            type: "bar",
            itemStyle: {
              //颜色样式部分
              normal: {
                barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]
                label: {
                  show: true, //开启数字显示
                  position: "top", //在上方显示数字
                  textStyle: {
                    //数值样式
                    color: "lightpink", //字体颜色
                    //fontSize: 10, //字体大小
                  },
                },
                //   柱状图颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {offset: 0, color: "#8277E9"},
                  {offset: 1, color: "#CC77E9"},
                ]),
              },
            },
          },
          {
            name: "投放总金额",
            type: "bar",
            itemStyle: {
              //颜色样式部分
              normal: {
                barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]
                label: {
                  show: true, //开启数字显示
                  position: "top", //在上方显示数字
                  textStyle: {
                    //数值样式
                    color: "white", //字体颜色
                    fontSize: 10, //字体大小
                  },
                },
                //   柱状图颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {offset: 0, color: "#017CE4"},
                  {offset: 1, color: "#249EFD"},
                ])
              }
            }
          }
        ]
      };
      // 图表初始化配置
      this.chartInstance.setOption(initOption);
    },
    getData() {
      getComplexJson().then(res => {
        // 先进行置空
        this.successData = [];
        this.failureData = [];
        let num1 = res.chartThree.num1
        let num2 = res.chartThree.num2
        let num3 = res.chartThree.num3
        let num4 = res.chartThree.num4
        let num5 = res.chartThree.num5
        let num6 = res.chartThree.num6
        let num7 = res.chartThree.num7
        let num8 = res.chartThree.num8
        let num9 = res.chartThree.num9
        let num10 = res.chartThree.num10;
        let num11 = res.chartThree.num11;
        let num12 = res.chartThree.num12;
        let num13 = res.chartThree.num13;
        let num14 = res.chartThree.num14;
        let num15 = res.chartThree.num15;
        let num16 = res.chartThree.num16;
        let num17 = res.chartThree.num17;
        let num18 = res.chartThree.num18;
        let num19 = res.chartThree.num19;
        let num20 = res.chartThree.num20;
        let num21 = res.chartThree.num21;
        let num22 = res.chartThree.num22;
        let num23 = res.chartThree.num23;
        let num24 = res.chartThree.num24;
        this.successData.push(num1, num2, num3, num4);
        this.failureData.push(num13, num14, num15, num16);
        // 处理图表需要的数据
        const dataOption = {
          xAxis: [
            {
              data: [
                "初始状态",
                "项目接洽中",
                "授信申报",
                "贷款投放"
              ]
            }
          ],
          series: [
            {
              data: this.successData
            },
            {
              data: this.failureData
            }
          ]
        }
        // 图表数据变化配置
        this.chartInstance.setOption(dataOption);
      })
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 40);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize),
          }
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          }
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize),
            }
          }
        },
        yAxis: {
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize),
            },
            position: 'left'
          }
        },
        series: [
          {
            // 圆柱的宽度
            barWidth: Math.round(this.titleFontSize * 0.8),
            itemStyle: { //设置渐变色
              normal: {
                label: {
                  textStyle: {
                    fontSize: Math.round(this.titleFontSize), //字体大小
                  }
                }
              }
            }
          },
          {
            // 圆柱的宽度
            barWidth: Math.round(this.titleFontSize * 0.8),
            itemStyle: {
              //颜色样式部分
              normal: {
                label: {
                  textStyle: {
                    fontSize: Math.round(this.titleFontSize), //字体大小
                  }
                }
              }
            }
          }
        ]
      }
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        this.getData()
      }, 5000)
    }
  }
}
</script>

